<template>
  <div class="login">
    <div class="sencod-bg"></div>
    <div class="login-content">
      <div class="bg-content">
        <img src="../../assets/img/login/logo.png" class="login-logo" />
        <div class="form-content">
          <div class="title-name">USER LOGIN</div>
          <div class="title-subname">用户登录</div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="0"
            class="form"
          >
            <el-form-item label="">
              <el-input
                v-model="form.dlbm"
                @keyup.enter.native="onSubmit"
                class="user-input"
                placeholder="用户名"
              >
                <template slot="prepend"
                  ><img src="../../assets/img/login/user.png" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="form.dlmm"
                @keyup.enter.native="onSubmit"
                class="pass-input"
                type="password"
                placeholder="密码"
                show-password
              >
                <template slot="prepend">
                  <img src="../../assets/img/login/password.png" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="yzm">
              <div class="code">
                <el-input
                  class="code-input"
                  maxlength="4"
                  @keyup.enter.native="onSubmit"
                  placeholder="验证码"
                  v-model.trim="form.yzm"
                  clearable
                >
                  <template slot="prepend"
                    ><img src="../../assets/img/login/yzm.png" />
                  </template>
                </el-input>
                <div class="code-img" @click="getYzm">
                  <!-- <sidentify ref="sidentifyRef" /> -->
                  <img :src="imgUrl" />
                </div>
              </div>
            </el-form-item>
            <el-form-item label-width="0">
              <div class="login-button" @click="onSubmit">登 录</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sm3Text from '@/utils/sm3'
import ryglServer from '@/api/rygl'
import sidentify from './components/sidentify.vue'
import { getFldmList } from '@/utils/fldm'
export default {
  name: 'login',
  components: { sidentify },
  data () {
    return {
      form: {},
      rules: {
        dlbm: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        dlmm: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        yzm: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      imgUrl: ''
    }
  },
  created () {},
  mounted () {
    this.$store.commit('SET_PERSONINFO', {})
    this.$store.commit('SET_MENUACTIVE', {})
    this.$store.commit('SET_ROUTERACTIVE', [])
    this.$store.commit('SET_GNLIST', [])
    // 获取验证码
    this.getYzm()
  },
  methods: {
    async onSubmit () {
      const flag = await this.$refs.form.validate().catch(() => false)
      if (!flag) {
        this.getYzm()
        return
      }
      const params = {
        ...this.form,
        dlmm: sm3Text(this.form.dlmm)
      }
      ryglServer
        .login(params)
        .then(res => {
          this.$store.commit('SET_PERSONINFO', res.userInfo)
          this.$router.push('/index')
          // 登录成功后
          const fldmList = window.sessionStorage.getItem('fldmList')
          if (!fldmList) {
            getFldmList()
          }
        })
        .catch(err => {
          !err.isError && this.$message.warning(err.message)
        })
        .finally(() => {
          this.getYzm()
        })
    },
    getYzm () {
      ryglServer
        .getYzm({})
        .then(res => {
          const blob = new Blob([res])
          this.imgUrl = window.URL.createObjectURL(blob)
        })
        .catch(err => {
          !err.isError && this.$message.warning(err.message)
        })
        .finally(() => {})
    },
    /** 刷新验证码 */
    refreshCode () {
      this.$refs.sidentifyRef.fuch()
    }
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/login/bj.jpg');
  background-size: 100% 100%;
  position: relative;
}
.login-content {
  width: 1200px;
  height: 550px;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../../assets/img/login/zhu.png');
  background-position: top center;
  background-repeat: no-repeat;
  .login-logo {
    margin: 68px 0 0 97px;
  }
  .bg-content {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/login/logo-bg.png');
    background-position: 51px 193px;
    background-repeat: no-repeat;
  }
  .form-content {
    width: 430px;
    height: 539px;
    background-image: url('../../assets/img/login/form-bg.png');
    position: absolute;
    right: 63px;
    top: -35px;
  }
  .title-name {
    font-size: 28px;
    color: rgba($color: #666666, $alpha: 0.4);
    font-family: MicrosoftYaHeiLig;
    margin: 35px 0 10px 44px;
  }
  .title-subname {
    font-size: 26px;
    color: #356aa1;
    margin-left: 44px;
    font-family: MicrosoftYaHei;
  }
  .form {
    width: 353px;
    margin: 43px;
  }
  .login-button {
    width: 100%;
    height: 53px;
    background: #235fcc;
    line-height: 53px;
    margin-top: 14px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    color: #d5e4ff;
    font-size: 22px;
    &:hover {
      color: #ffffff;
    }
  }
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-input {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &:hover {
      border-color: #4084f0;
    }
  }
  ::v-deep.el-input__inner {
    height: 46px;
    line-height: 46px;
    padding: 0;
    border: none;
    outline: none;
  }
  ::v-deep.el-input-group__prepend {
    border: none;
    padding: 0 15px;
    background-color: transparent;
  }
  .user-input {
    background-image: url('../../assets/img/login/user.png') no-repeat 0 0;
  }
  .code {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    .code-input {
      flex: 1;
      max-width: 260px;
    }
    .code-img {
      width: 85px;
      border: 1px solid #dcdfe6;
      height: 46px;
      border-radius: 4px;
      line-height: 46px;
      margin-left: 7px;
      cursor: pointer;
      background-color: #ffffff;
    }
  }
}
</style>
